<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>设计器模版</title>
		<link type="text/css" href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/json2.js"></script>
		<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		
		<link type="text/css" href="style/page.css" rel="stylesheet" />
		<link type="text/css" href="style/board-designer.css" rel="stylesheet" />
		<link type="text/css" href="style/dwmis.css" rel="stylesheet" />
		<script type="text/javascript" src="js/board-designer.js"></script>
		
		<style>
			form { font-size: 15px;}
			form label { display:block; }
			form .ui-button-text { font-size: 15px;}
			form input.text { margin-bottom:12px; width:95%; padding: .4em; }
		</style>
		
	</head>
	<body>
	<div id="operator-menu" style="z-index: 10000;">
		<div id="operator-container">
			<span style="float: left;"><input id="newFatherWindow" type="button" value="新建父窗口"><input id="newRemark" type="button" value="新建备注"></span><span class="float-right"><input type="button" value="查看JSON" id="jsonDetail"><input type="button" value="保存" id="saveBoard"><input type="button" value="清除" id="clearBoard"></span>
		</div>
	</div>
	<!--[if lte IE 7]>
	<div></div>
	<![endif]-->
	<div id="container">
		<div id="window-container">
			<!--  content  -->
		</div>
		<div class="clear-both"></div>
		<div id="footer">
			<p>模版设计器Demo<br/ >
			@author by yuwei.zheng</p>
		</div>
	</div>

	<div id="newRemarkForm" title="添加备注" style="display:none;">
		<form name="newRemarkForm">
			<label for="content">内容</label></br>
			<input type="text" name="content" class="text ui-widget-content ui-corner-all" />
			</br>
			<label for="href">url</label></br>
			<input type="text" name="href" class="text ui-widget-content ui-corner-all" />
			</br>
		</form>
	</div>
	
	<!--
		下面这个本来是应该由js动态生成的，因为在js代码里面直接用到了。这里放这里只是方便调试。
	-->
	<div id="newSubWinForm" title="添加子窗体" style="display:none;">
		<form name="newSubWinForm">
			<label for="title">标题</label></br>
			<input type="text" name="title" class="text ui-widget-content ui-corner-all" />
			</br>
			<label for="hasborder" style="display: inline;">是否显示边框</label>
			<input type="checkbox" name="hasborder" checked="checked" />
			</br>
		</form>
	</div>
	<!--
		end
	-->
	
	<div id="newFatherWinForm" title="添加父窗体" style="display:none;">
		<form name="newFatherWinForm">
			<label for="title">标题</label></br>
			<input type="text" name="title" class="text ui-widget-content ui-corner-all" />
			</br>
			<label for="hasborder" style="display: inline;">是否显示边框</label>
			<input type="checkbox" name="hasborder" checked="checked" />
			</br>
		</form>
	</div>
	
	</body>
	
	<script type="text/javascript">
		var boardDesigner = new BoardDesigner();

		// init system
		$(function(){
			boardDesigner.init({'mainContainer' : 'window-container', 'readonly' : true});
			
			$('#newFatherWindow').button().click(function(){
				$("#newFatherWinForm").dialog({
					width: 450,
					height: 330,
					modal: true,
					resizable: false,
					buttons: {
						"添加":function(){
							var title = document.newFatherWinForm.title.value;
							var hasborder = document.newFatherWinForm.hasborder.checked;
							boardDesigner.createFatherWindowWithUpdateData({'title' : title, 'hasborder' : hasborder});
							$(this).dialog('close');
						},
						"取消":function(){
							$(this).dialog('close');
						}
					}
				});
			});
			
			$('#newRemark').button().click(function(){
				$("#newRemarkForm").dialog({
					width: 450,
					height: 330,
					modal: true,
					resizable: false,
					buttons: {
						"添加":function(){
							var content = document.newRemarkForm.content.value;
							var href = document.newRemarkForm.href.value;
							boardDesigner.createCustomWindowWithUpdateData({'content':content, 'href':href});
							$(this).dialog('close');
						},
						"取消":function(){
							$(this).dialog('close');
						}
					}
				});
			});
			
			$('#saveBoard').button().click(function(){
				boardDesigner.save();
				alert('保存成功');
			});
			
			$('#jsonDetail').button().click(function(){
				var str = JSON.stringify(boardDesigner.boardData);
				alert(str);
			});
			
			$('#clearBoard').button().click(function(){
				if (confirm('确定清除布局数据？') == true){
					boardDesigner.clear();
					alert('清除成功！请刷新查看。');
				}
			});
			
		});
	</script>
	
	
	<script type="text/javascript">
		var IO=document.getElementById('operator-menu'),Y=IO,H=0,IE6;
		IE6=window.ActiveXObject&&!window.XMLHttpRequest;
		while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
		if(IE6)
		IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
		".documentElement.scrollTop-(this.javascript||"+H+")):0)";
		window.onscroll=function (){
		var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
		if(s>H&&IO.fix||s<=H&&!IO.fix)return;
		if(!IE6)IO.style.position=IO.fix?"":"fixed";
		IO.fix=!IO.fix;
		};
		try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
	</script>
</html>


